<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
</head>
<style>
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
    }

    .box {
        width: 596px;
        height: 200px;
        border: 1px solid #e7e7e7;
        margin: 100px auto;
    }

    .top {
        height: 35px;
        width: 100%;
        background-image: url('img./btn_cartoon.gif');
        background-position: 0 0;
        display: flex;
        justify-content: space-between;
    }

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .list {
        width: 45px;
        height: 7px;
        display: flex;
        justify-content: space-around;
        float: left;
        margin: 13px 10px;
    }

    .list li {
        width: 7px;
        height: 7px;
        border-radius: 50px;
        background-color: #ffffff;
    }

    .active {
        background-color: #04a4f4;
    }

    .top-left>span {
        display: inline-block;
        width: 83px;
        height: 35px;
        background-image: url('img./btn_cartoon.gif');
        background-position: 0 -100px;
        float: left;
    }

    .spans {
        width: 58px;
        height: 20px;
        float: left;
        margin: 6px 0;
        display: flex;
    }

    .spans span {
        display: inline-block;
        width: 29px;
        height: 23px;
        background-color: beige;
        margin: 0;
    }

    .prve {
        background-image: url('img./btn_cartoon.gif');
        background-position: 0px -500px;
    }

    .prve:hover {
        background-position: 0px -400px;
    }

    .next {
        background-image: url('img./btn_cartoon.gif');
        background-position: -30px -500px;
    }

    .next:hover {
        background-position: -30px -400px;
    }

    a {
        font-size: 14px;
        text-decoration: none;
        line-height: 35px;
        border-bottom: 1px solid transparent;
    }

    a:hover {
        border-bottom: 1px solid lightcoral;
        color: lightcoral;
    }

    .bottom {
        height: 205px;
        padding: 20px 10px;
        /* position: absolute; */
        display: flex;
        justify-content: space-between;
    }

    .bg {
        width: 2304px;
        position: absolute;
        display: flex;
        justify-content: space-between;
    }

    .box-info {
        width: 576px;
        overflow: hidden;
        position: relative;
    }

    .bottom-boxs {

        display: flex;
        justify-content: space-between;
        width: 576px;
    }

    .bottom-box {
        width: 128px;
        height: 100%;
    }

    .bottom-box a {
        margin-bottom: 8px;
    }

    .bottom-box p {
        font-size: 14px;
        margin-top: -10px;
    }

    img {
        width: 127px;
        height: 81px;
    }
    /* .list li:active{
        background-color: #04a4f4;
    } */
    .top .top-left .list .active{
        background-color: #04a4f4;
    }
</style>

<body>
    <div class="box">
        <div class="top">
            <div class="top-left">
                <span></span>
                <ul class="list">
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="spans">
                    <span class="prve"></span>
                    <span class="next"></span>
                </div>
            </div>
            <div class="top-right">
                <a href="#">更多>></a>
            </div>
        </div>

        <div class="bottom">
            <div class="box-info">
                <div class="bg">

                    <div class="bottom-boxs">
                        <div class="bottom-box">
                            <img src="01.jpg" alt="">
                            <a href="#">海贼王</a>
                            <p>播放:28.276</p>
                        </div>
                        <div class="bottom-box">
                            <img src="01.jpg" alt="">
                            <a href="#">海贼王</a>
                            <p>播放:28.276</p>
                        </div>
                        <div class="bottom-box">
                            <img src="01.jpg" alt="">
                            <a href="#">海贼王</a>
                            <p>播放:28.276</p>
                        </div>
                        <div class="bottom-box">
                            <img src="01.jpg" alt="">
                            <a href="#">海贼王</a>
                            <p>播放:28.276</p>
                        </div>

                    </div>
                    <div class="bottom-boxs">
                        <div class="bottom-box">
                            <img src="02.jpg" alt="">
                            <a href="#">海贼王</a>
                            <p>播放:28.276</p>
                        </div>
                        <div class="bottom-box">
                            <img src="02.jpg" alt="">
                            <a href="#">海贼王</a>
                            <p>播放:28.276</p>
                        </div>
                        <div class="bottom-box">
                            <img src="02.jpg" alt="">
                            <a href="#">海贼王</a>
                            <p>播放:28.276</p>
                        </div>
                        <div class="bottom-box">
                            <img src="02.jpg" alt="">
                            <a href="#">海贼王</a>
                            <p>播放:28.276</p>
                        </div>

                    </div>
                    <div class="bottom-boxs">
                        <div class="bottom-box">
                            <img src="03.jpg" alt="">
                            <a href="#">海贼王</a>
                            <p>播放:28.276</p>
                        </div>
                        <div class="bottom-box">
                            <img src="03.jpg" alt="">
                            <a href="#">海贼王</a>
                            <p>播放:28.276</p>
                        </div>
                        <div class="bottom-box">
                            <img src="03.jpg" alt="">
                            <a href="#">海贼王</a>
                            <p>播放:28.276</p>
                        </div>
                        <div class="bottom-box">
                            <img src="03.jpg" alt="">
                            <a href="#">海贼王</a>
                            <p>播放:28.276</p>
                        </div>
                        <div class="bottom-boxs">
                            <div class="bottom-box">
                                <img src="03.jpg" alt="">
                                <a href="#">海贼王</a>
                                <p>播放:28.276</p>
                            </div>
                        </div>
                    </div>


                    <div class="bottom-boxs">
                        <div class="bottom-box">
                            <img src="04.jpg" alt="">
                            <a href="#">海贼王</a>
                            <p>播放:28.276</p>
                        </div>
                        <div class="bottom-box">
                            <img src="04.jpg" alt="">
                            <a href="#">海贼王</a>
                            <p>播放:28.276</p>
                        </div>
                        <div class="bottom-box">
                            <img src="04.jpg" alt="">
                            <a href="#">海贼王</a>
                            <p>播放:28.276</p>
                        </div>
                        <div class="bottom-box">
                            <img src="04.jpg" alt="">
                            <a href="#">海贼王</a>
                            <p>播放:28.276</p>
                        </div>

                    </div>

                </div>
            </div>
        </div>

    </div>
    </div>
    </div>
    <script src="./jquery.js"></script>
</body>

</html>
<script>
    var count = 0;
    function change() {
        console.log(count);
        $('.bg').stop(true).animate({
            left: count * -576
        }, 200);
        $('.list>li').eq(count).addClass('active').siblings().removeClass('active');
    }
    $('.next').click(function () {
        count++;
        if (count == 4) {
            count = 0;
            // return
            // break
        }
        change();
    });

    $('.prve').click(function () {
        count--;
        if (count == -1) {
            count = 3;
            // return
            // break
        }
        change();
    });

    //  $('.next').click(function(){
    //         $('.bg').animate({
    //             left:570
    //         },1000)
    //  })

</script>